TypeScript 泛型：掌握复杂数据类型，构建健壮的应用程序

TypeScript 是 JavaScript 的一个超集，它通过静态类型帮助开发者编写更健壮、更易于维护的代码。其中最强大的功能之一是泛型，它允许您编写能够处理多种数据类型的代码，同时保持类型安全。本指南将全面探讨 TypeScript 泛型，重点介绍其在全球软件开发背景下对复杂数据类型的应用。

什么是泛型？

泛型提供了一种编写可重用代码的方法，这些代码可以处理不同的类型。您无需为每种要支持的类型编写单独的函数或类，而是可以编写一个使用类型参数的通用函数或类。这些类型参数是占位符，当函数或类被调用或实例化时，它们将被实际类型所替代。这在处理复杂数据结构时尤其有用，因为这些结构内部的数据类型可能会变化。

使用泛型的好处

• 代码复用： 一次编写代码，即可用于不同类型。这减少了代码重复，使您的代码库更易于维护。
• 类型安全： 泛型允许 TypeScript 编译器在编译时强制执行类型安全。这有助于防止因类型不匹配而导致的运行时错误。
• 提高可读性： 泛型通过清晰地表明您的函数和类设计用于处理哪些类型，从而使您的代码更具可读性。
• 提升性能： 在某些情况下，泛型可以带来性能提升，因为编译器可以根据使用的具体类型来优化生成的代码。

泛型的基本语法

泛型的基本语法涉及使用尖括号 (< >) 来声明类型参数。这些类型参数通常命名为 T、K、V 等，但您也可以使用任何有效的标识符。以下是一个简单的泛型函数示例：

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // 输出: hello
console.log(myNumber); // 输出: 123
console.log(myBoolean); // 输出: true

在此示例中，<T> 声明了一个名为 T 的类型参数。函数 identity 接受一个类型为 T 的参数，并返回一个类型为 T 的值。调用该函数时，您可以显式指定类型参数（例如 identity<string>），也可以让 TypeScript 根据参数类型进行推断。

处理复杂数据类型

在处理数组、对象和接口等复杂数据类型时，泛型变得尤为重要。让我们探讨一些常见场景：

泛型数组

您可以使用泛型来创建能够处理不同类型数组的函数或类：

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // 输出: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // 输出: apple, banana, cherry

在这里，arrayToString 函数接受一个类型为 T[] 的数组，并返回该数组的字符串表示形式。这个函数适用于任何类型的数组，因此具有很高的可重用性。

泛型对象

泛型也可以用于定义能够处理不同结构对象的函数或类：

interface Person {
  name: string;
  age: number;
  country: string; // 为全球化上下文添加国家
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // 为全球化上下文添加货币
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // 输出: Name: Alice
displayInfo(product); // 输出: Name: Laptop

在此示例中，displayInfo 函数接受一个类型为 T 的对象，该对象必须具有一个类型为 string 的 name 属性。其中 extends { name: string } 子句是一个约束，它指定了类型参数 T 的最低要求。这确保了函数可以安全地访问 name 属性。

泛型的高级用法

TypeScript 泛型提供了更高级的功能，让您能够创建更灵活、更强大的代码。让我们来探讨其中的一些功能：

多个类型参数

您可以定义具有多个类型参数的函数或类：

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // 输出: Bob
console.log(merged.age); // 输出: 42

merge 函数接受两个类型分别为 T 和 U 的对象，并返回一个包含两个对象所有属性的新对象。这是合并来自不同来源数据的一种强大方式。

泛型约束

如前所示，约束允许您限制可用于泛型类型参数的类型。这确保了泛型代码可以在指定的类型上安全操作。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // 输出: 3
loggingIdentity("hello"); // 输出: 5
// loggingIdentity(123); // 错误：类型 'number' 的参数不能赋给类型 'Lengthwise' 的参数。

loggingIdentity 函数接受一个类型为 T 的参数，该参数必须具有一个类型为 number 的 length 属性。这确保了函数可以安全地访问 length 属性。

泛型类

泛型也可以用于类：

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // 输出: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // 输出: [ 2 ]

DataStorage 类可以存储任何类型为 T 的数据。这使您能够创建类型安全且可重用的数据结构。

泛型接口

泛型接口对于定义可以处理不同类型的契约非常有用。例如：

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

Result 接口定义了一个用于表示操作结果的通用结构。它可以包含类型为 T 的数据或类型为 E 的错误。这是处理异步操作或可能失败的操作的常见模式。

工具类型与泛型

TypeScript 提供了几个内置的工具类型，它们与泛型配合得很好。这些工具类型可以帮助您以强大的方式转换和操作类型。

Partial<T>

Partial<T> 将类型 T 的所有属性变为可选：

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // 有效

Readonly<T>

Readonly<T> 将类型 T 的所有属性变为只读：

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // 错误：无法为“age”赋值，因为它是只读属性。

Pick<T, K>

Pick<T, K> 从类型 T 中选择一组属性 K：

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> 从类型 T 中移除一组属性 K：

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> 创建一个键为 K、值为 T 类型的类型：

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // 为全球化上下文扩展列表
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // 为全球化上下文扩展列表

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

映射类型

映射类型允许您通过遍历现有类型的属性来转换它们。这是基于现有类型创建新类型的一种强大方式。例如，您可以创建一个将另一类型的所有属性都设为只读的类型：

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // 错误：无法为“age”赋值，因为它是只读属性。

在此示例中，[K in keyof Person] 遍历 Person 接口的所有键，而 Person[K] 访问每个属性的类型。readonly 关键字使每个属性都成为只读。

条件类型

条件类型允许您根据条件来定义类型。这是创建能够适应不同场景的类型的一种强大方式。

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // 同时处理 null 和 undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // 输出: HELLO

  const invalidValue = getValue(null); // 这将抛出错误
  console.log(invalidValue); // 这行代码不会被执行
} catch (error: any) {
  console.error(error.message); // 输出: Value cannot be null or undefined
}

在此示例中，NonNullable<T> 类型检查 T 是否为 null 或 undefined。如果是，它返回 never，表示该类型不被允许。否则，它返回 T。这使您可以创建保证为非空的类型。

使用泛型的最佳实践

在使用泛型时，请牢记以下一些最佳实践：

• 使用描述性的类型参数名称： 选择能清晰表明类型参数用途的名称。
• 使用约束来限制可用于泛型类型参数的类型： 这确保您的泛型代码可以安全地操作指定的类型。
• 保持泛型代码的简洁和专注： 避免用过多的类型参数或复杂的约束使泛型代码过于复杂。
• 为您的泛型代码编写详尽的文档： 解释类型参数的用途以及使用的任何约束。
• 权衡代码可重用性和类型安全性： 虽然泛型可以提高代码的可重用性，但它们也可能使您的代码更复杂。在使用泛型之前，请权衡其优缺点。
• 考虑本地化和全球化 (l10n and g11n)： 在处理需要向不同地区用户显示的数据时，请确保您的泛型支持适当的格式和文化惯例。例如，数字和日期的格式在不同地区之间可能差异很大。

全球化应用场景示例

让我们考虑一些泛型在全球化应用场景中的示例：

货币转换

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // 输出: 100 USD is equal to 85 EUR

日期格式化

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("US Date: " + formatDate(currentDate, usDateFormat));
console.log("German Date: " + formatDate(currentDate, germanDateFormat));
console.log("Japanese Date: " + formatDate(currentDate, japaneseDateFormat));

翻译服务

interface Translation {
  [key: string]: string; // 允许动态的语言键
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Translation for ${key} in ${languageCode} not found.`;
  }
  return lang.translations[key] || `Translation for ${key} not found.`;
}

console.log(translate("hello", "en", languageData)); // 输出: Hello
console.log(translate("hello", "es", languageData)); // 输出: Hola
console.log(translate("welcome", "fr", languageData)); // 输出: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // 输出: Translation for missingKey in de not found.

结论

TypeScript 泛型是编写可重用、类型安全且能处理复杂数据类型的代码的强大工具。通过理解泛型的基本语法、高级功能和最佳实践，您可以显著提高 TypeScript 应用程序的质量和可维护性。在为全球用户开发应用程序时，泛型可以帮助您处理多样化的数据格式和文化惯例，从而确保为每个人提供无缝的用户体验。